<template>
    <div class="wrapper_out" id="app_back">
        <div class="">
           <Tabs type="card">
                <Tab-pane class="wrapper_inner" icon="" label="我的录音机">
                    <RecorderModule/>
                </Tab-pane>

                <Tab-pane class="wrapper_inner" icon="" label="音频列表">
                    <RecorderList/>
                </Tab-pane>

                <Tab-pane class="wrapper_inner" icon="" label="音频识别">
                    <RecorderIdentity/>
                </Tab-pane>

                <Tab-pane class="wrapper_inner" icon="" label="实时语音识别">
                    <RecorderRealTimeIdentity/>
                </Tab-pane>

                <Tab-pane class="wrapper_inner" icon="" label="拓展功能">
                    <RecorderExtend/>
                </Tab-pane>

                <Tab-pane class="wrapper_inner" icon="" label="关于我们">
                    <AboutMe/>
                </Tab-pane>
            </Tabs>
        </div>
    </div>
</template>


<script>
// 录音模块 。。。
import RecorderModule from '@/components/Recorder.vue'
// 音频列表
import RecorderList from '@/components/RecorderList.vue'
// 音频识别 
import RecorderIdentity from '@/components/RecorderIdentity.vue'
// 实时语音识别
import RecorderRealTimeIdentity from '@/components/RecorderRealTimeIdentity.vue'
// 拓展功能
import RecorderExtend from '@/components/RecorderExtend.vue'
// 关于我们
import AboutMe from '@/components/AboutMe.vue'

export default {
    components: {
        RecorderModule,
        RecorderList,
        RecorderIdentity,
        RecorderRealTimeIdentity,
        RecorderExtend,
        AboutMe
    }
}
</script>


<style scoped>

.wrapper_out{
    /* background-color: #FF6666; */
    padding: 10px;
    height: 100vh;
    color: white;
}

.wrapper_inner{
    /* background-color:#006699; */
    height: 99%;
    margin: 1px;
    padding: 20px;
    color: white;
}

</style>

